/**
 * 文档表单页面功能增强
 */

// 在文档加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 初始化Markdown预览功能
    initMarkdownPreview();
    
    // 不再在页面加载时就初始化文件上传，改为按需初始化
    // initFileDragDrop();
    
    // 初始化表单验证
    initFormValidation();
});

/**
 * 初始化Markdown预览功能
 */
function initMarkdownPreview() {
    const previewBtn = document.querySelector('.preview-btn');
    const contentTextarea = document.getElementById('kb-content');
    
    if (!previewBtn || !contentTextarea) return;
    
    // 预览状态变量
    let isPreviewVisible = false;
    
    // 预览功能
    window.togglePreview = function() {
        const markdownPreview = document.getElementById('markdown-preview');
        const previewContent = markdownPreview.querySelector('.preview-content');
        
        if (!isPreviewVisible) {
            // 显示预览
            const content = contentTextarea.value || '';
            
            // 使用marked库解析Markdown
            if (window.marked) {
                previewContent.innerHTML = window.marked.parse(content);
            } else {
                previewContent.innerHTML = `<p>${content}</p>`;
            }
            
            markdownPreview.style.display = 'block';
            previewBtn.innerHTML = '<i class="bi bi-pencil"></i><span>编辑</span>';
            
            // 滚动到预览区域
            markdownPreview.scrollIntoView({ behavior: 'smooth' });
        } else {
            // 隐藏预览
            markdownPreview.style.display = 'none';
            previewBtn.innerHTML = '<i class="bi bi-eye"></i><span>预览</span>';
            
            // 聚焦回编辑区域
            contentTextarea.focus();
        }
        
        // 切换状态
        isPreviewVisible = !isPreviewVisible;
    };
}

/**
 * 初始化文件上传拖放功能
 */
function initFileDragDrop() {
    const fileUploadArea = document.querySelector('.file-upload-area');
    const fileInput = document.getElementById('file-upload');
    
    if (!fileUploadArea || !fileInput) {
        return;
    }
    
    // 阻止默认拖放行为，防止文件在浏览器中打开
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        fileUploadArea.addEventListener(eventName, preventDefaults, false);
    });
    
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    // 添加拖放效果
    ['dragenter', 'dragover'].forEach(eventName => {
        fileUploadArea.addEventListener(eventName, () => {
            fileUploadArea.classList.add('dragover');
        });
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        fileUploadArea.addEventListener(eventName, () => {
            fileUploadArea.classList.remove('dragover');
        });
    });
    
    // 处理拖放文件
    fileUploadArea.addEventListener('drop', function(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        
        if (files.length > 0) {
            fileInput.files = files;
            
            // 触发原有的文件选择处理函数
            if (typeof handleFileSelected === 'function') {
                handleFileSelected();
            }
        }
    });
    
    // 添加文件选择变化监听
    fileInput.addEventListener('change', function() {
        // 触发文件选择处理函数
        if (typeof handleFileSelected === 'function') {
            handleFileSelected();
        }
    });
    
    // 处理点击上传区域的事件
    const fileInputLabel = fileUploadArea.querySelector('.file-upload-label');
    if (fileInputLabel) {
        // 按钮直接点击时的处理
        const uploadLinks = fileInputLabel.querySelectorAll('a');
        uploadLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                // 对链接点击单独处理，防止触发文件选择框
                e.stopPropagation();
            });
        });
        
        // 更新标签点击事件，现在使用了原生的label for关联，不需要特殊处理
        // 因为label元素已经通过for属性与file input关联，浏览器会自动处理点击行为
    }
}

/**
 * 初始化字数统计功能
 */
function initTextCounter() {
    const contentTextarea = document.getElementById('kb-content');
    const titleInput = document.getElementById('doc-title');
    
    if (contentTextarea) {
        // 检查是否已经存在字数统计元素，避免重复创建
        const existingCounter = contentTextarea.parentNode.querySelector('.text-counter');
        if (existingCounter) {
            existingCounter.remove();
        }
        
        // 创建内容字数统计元素
        const contentCounter = document.createElement('div');
        contentCounter.className = 'text-counter';
        contentCounter.textContent = '0 字';
        
        // 插入到文本区域后面
        contentTextarea.parentNode.insertBefore(contentCounter, contentTextarea.nextSibling);
        
        // 更新字数统计
        function updateContentCounter() {
            const length = contentTextarea.value.length;
            contentCounter.textContent = `${length} 字`;
            
            // 根据字数添加不同样式
            contentCounter.className = 'text-counter';
            if (length > 10000) {
                contentCounter.classList.add('danger');
            } else if (length > 5000) {
                contentCounter.classList.add('warning');
            }
        }
        
        // 监听输入事件
        contentTextarea.addEventListener('input', updateContentCounter);
        
        // 初始化字数统计
        updateContentCounter();
    }
    
    if (titleInput) {
        // 检查是否已经存在字数统计元素，避免重复创建
        const existingTitleCounter = titleInput.parentNode.querySelector('.text-counter');
        if (existingTitleCounter) {
            existingTitleCounter.remove();
        }
        
        // 创建标题字数统计元素
        const titleCounter = document.createElement('div');
        titleCounter.className = 'text-counter';
        titleCounter.textContent = '0/100 字';
        
        // 插入到标题输入框后面
        titleInput.parentNode.insertBefore(titleCounter, titleInput.nextSibling);
        
        // 更新字数统计
        function updateTitleCounter() {
            const length = titleInput.value.length;
            titleCounter.textContent = `${length}/100 字`;
            
            // 根据字数添加不同样式
            titleCounter.className = 'text-counter';
            if (length > 100) {
                titleCounter.classList.add('danger');
            } else if (length > 80) {
                titleCounter.classList.add('warning');
            }
        }
        
        // 监听输入事件
        titleInput.addEventListener('input', updateTitleCounter);
        
        // 初始化字数统计
        updateTitleCounter();
    }
}

/**
 * 初始化表单验证
 */
function initFormValidation() {
    const docTitleInput = document.getElementById('doc-title');
    const contentTextarea = document.getElementById('kb-content');
    const addDocumentBtn = document.getElementById('add-document-btn');
    
    if (!docTitleInput || !addDocumentBtn) return;
    
    // 表单提交前验证
    if (typeof window.addToKnowledgeBase === 'function') {
        // 保存原始函数
        const originalAddToKnowledgeBase = window.addToKnowledgeBase;
        
        // 重写函数，添加验证
        window.addToKnowledgeBase = function() {
            // 清除所有错误提示
            clearFormErrors();
            
            // 验证标题
            if (!docTitleInput.value.trim()) {
                showFormError(docTitleInput, '请输入文档标题');
                return;
            }
            
            // 验证文档内容
            if (document.querySelector('.method-tab[data-method="text"].active') && contentTextarea) {
                if (!contentTextarea.value.trim()) {
                    showFormError(contentTextarea, '请输入文档内容');
                    return;
                }
            }
            
            // 验证文件
            if (document.querySelector('.method-tab[data-method="file"].active')) {
                const fileUpload = document.getElementById('file-upload');
                if (!fileUpload || !fileUpload.files || fileUpload.files.length === 0) {
                    const fileUploadArea = document.querySelector('.file-upload-area');
                    showFormError(fileUploadArea, '请选择要上传的文件');
                    return;
                }
            }
            
            // 调用原始函数
            originalAddToKnowledgeBase();
        };
    }
    
    // 添加文档编辑验证
    if (typeof window.updateDocument === 'function') {
        // 保存原始函数
        const originalUpdateDocument = window.updateDocument;
        
        // 重写函数，添加验证
        window.updateDocument = function(docId) {
            // 清除所有错误提示
            clearFormErrors();
            
            // 验证标题
            if (!docTitleInput.value.trim()) {
                showFormError(docTitleInput, '请输入文档标题');
                return;
            }
            
            // 验证文档内容
            if (contentTextarea && !contentTextarea.value.trim()) {
                showFormError(contentTextarea, '请输入文档内容');
                return;
            }
            
            // 调用原始函数
            originalUpdateDocument(docId);
        };
    }
    
    // 增强输入框聚焦体验
    [docTitleInput, contentTextarea].forEach(input => {
        if (!input) return;
        
        input.addEventListener('focus', function() {
            this.parentNode.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentNode.classList.remove('focused');
            
            // 如果输入框不为空，添加一个填充状态的类
            if (this.value.trim()) {
                this.parentNode.classList.add('filled');
            } else {
                this.parentNode.classList.remove('filled');
            }
        });
        
        // 初始状态检查
        if (input.value.trim()) {
            input.parentNode.classList.add('filled');
        }
    });
}

/**
 * 显示表单错误
 */
function showFormError(element, message) {
    // 清除已有错误
    clearFormErrors(element);
    
    // 创建错误提示元素
    const errorElement = document.createElement('div');
    errorElement.className = 'form-error';
    errorElement.textContent = message;
    
    // 将错误提示添加到元素后面
    element.parentNode.appendChild(errorElement);
    
    // 添加错误样式
    element.classList.add('error');
    
    // 聚焦到出错的元素
    element.focus();
    
    // 5秒后自动清除错误
    setTimeout(() => {
        clearFormErrors(element);
    }, 5000);
}

/**
 * 清除表单错误
 */
function clearFormErrors(element) {
    if (element) {
        // 清除特定元素的错误
        const errorElement = element.parentNode.querySelector('.form-error');
        if (errorElement) {
            errorElement.remove();
        }
        element.classList.remove('error');
    } else {
        // 清除所有错误
        document.querySelectorAll('.form-error').forEach(error => error.remove());
        document.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
    }
}

/**
 * 显示支持的文件类型
 */
window.showSupportedFileTypes = function() {
    // 创建模态窗口
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.style.display = 'block';
    modal.id = 'supported-file-types-modal';
    
    // 文件类型信息
    const fileTypes = [
        { ext: 'PDF', icon: 'bi-file-earmark-pdf', desc: 'PDF文档' },
        { ext: 'DOCX', icon: 'bi-file-earmark-word', desc: 'Word文档' },
        { ext: 'DOC', icon: 'bi-file-earmark-word', desc: 'Word文档' },
        { ext: 'XLS', icon: 'bi-file-earmark-excel', desc: 'Excel表格' },
        { ext: 'XLSX', icon: 'bi-file-earmark-excel', desc: 'Excel表格' },
        { ext: 'PPT', icon: 'bi-file-earmark-slides', desc: 'PPT演示文稿' },
        { ext: 'PPTX', icon: 'bi-file-earmark-slides', desc: 'PPT演示文稿' },
        { ext: 'TXT', icon: 'bi-file-earmark-text', desc: '文本文件' },
        { ext: 'CSV', icon: 'bi-filetype-csv', desc: 'CSV数据文件' },
        { ext: 'JSON', icon: 'bi-filetype-json', desc: 'JSON数据文件' },
        { ext: 'MD', icon: 'bi-markdown', desc: 'Markdown文件' },
        { ext: 'JPG', icon: 'bi-filetype-jpg', desc: '图片文件' },
        { ext: 'PNG', icon: 'bi-filetype-png', desc: '图片文件' }
    ];
    
    // 文件类型HTML
    let fileTypesHtml = '';
    fileTypes.forEach(type => {
        fileTypesHtml += `
            <div class="file-type-item">
                <i class="bi ${type.icon}"></i>
                <div class="ext">.${type.ext}</div>
                <div class="desc">${type.desc}</div>
            </div>
        `;
    });
    
    // 关闭模态窗口的函数
    function closeSupportedFileTypesModal() {
        const modal = document.getElementById('supported-file-types-modal');
        if (modal) {
            modal.remove();
        }
        // 清理全局函数
        if (window.closeSupportedFileTypesModal) {
            delete window.closeSupportedFileTypesModal;
        }
    }
    
    // 模态窗口内容
    modal.innerHTML = `
        <div class="modal-content draggable-modal" style="
            max-width: 600px; 
            max-height: 80vh; 
            position: relative;
            margin: auto;
            top: 10vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        ">
            <div class="modal-header draggable-header" style="
                cursor: move;
                user-select: none;
                background: #f8f9fa;
                border-bottom: 1px solid #dee2e6;
                padding: 15px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-shrink: 0;
            ">
                <h2 style="margin: 0; color: #495057;">支持的文件类型</h2>
                <span class="close" onclick="closeSupportedFileTypesModal()" style="
                    cursor: pointer;
                    font-size: 24px;
                    color: #6c757d;
                    transition: color 0.2s;
                " onmouseover="this.style.color='#dc3545'" onmouseout="this.style.color='#6c757d'">&times;</span>
            </div>
            <div class="modal-body" style="
                flex: 1;
                overflow-y: auto;
                padding: 20px;
            ">
                <p style="margin-bottom: 16px; color: #6c757d;">系统支持以下文件类型的上传和解析：</p>
                <div class="supported-files-list">
                    ${fileTypesHtml}
                </div>
                
                <div class="form-actions" style="justify-content: center; margin-top: 24px;">
                    <button class="secondary-btn" onclick="closeSupportedFileTypesModal()">
                        <i class="bi bi-check-circle"></i> 确定
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // 添加到页面
    document.body.appendChild(modal);
    
    // 将关闭函数添加到全局作用域，以便onclick可以访问
    window.closeSupportedFileTypesModal = closeSupportedFileTypesModal;
    
    // 点击模态窗口背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeSupportedFileTypesModal();
        }
    });
    
    // 按ESC键关闭
    function handleEscKey(e) {
        if (e.key === 'Escape') {
            closeSupportedFileTypesModal();
            document.removeEventListener('keydown', handleEscKey);
        }
    }
    document.addEventListener('keydown', handleEscKey);
    
    // 添加拖动功能
    const modalContent = modal.querySelector('.modal-content');
    const header = modal.querySelector('.draggable-header');
    
    let isDragging = false;
    let dragOffsetX = 0;
    let dragOffsetY = 0;
    
    header.addEventListener('mousedown', function(e) {
        // 只有在点击标题栏时才开始拖动，不是关闭按钮
        if (e.target.classList.contains('close')) return;
        
        isDragging = true;
        const rect = modalContent.getBoundingClientRect();
        dragOffsetX = e.clientX - rect.left;
        dragOffsetY = e.clientY - rect.top;
        
        // 改变鼠标样式
        document.body.style.cursor = 'grabbing';
        header.style.cursor = 'grabbing';
        
        // 阻止文本选择
        e.preventDefault();
    });
    
    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        
        // 计算新位置
        let newX = e.clientX - dragOffsetX;
        let newY = e.clientY - dragOffsetY;
        
        // 限制拖动范围，确保弹窗不会完全移出视窗
        const minX = -modalContent.offsetWidth + 100; // 至少保留100px可见
        const maxX = window.innerWidth - 100;
        const minY = 0;
        const maxY = window.innerHeight - 100;
        
        newX = Math.max(minX, Math.min(maxX, newX));
        newY = Math.max(minY, Math.min(maxY, newY));
        
        // 应用新位置
        modalContent.style.position = 'fixed';
        modalContent.style.left = newX + 'px';
        modalContent.style.top = newY + 'px';
        modalContent.style.margin = '0';
        modalContent.style.transform = 'none';
        
        e.preventDefault();
    });
    
    document.addEventListener('mouseup', function() {
        if (isDragging) {
            isDragging = false;
            
            // 恢复鼠标样式
            document.body.style.cursor = '';
            header.style.cursor = 'move';
        }
    });
    
    // 添加双击标题栏重置位置的功能
    header.addEventListener('dblclick', function(e) {
        if (e.target.classList.contains('close')) return;
        
        // 重置到中央位置
        modalContent.style.position = 'relative';
        modalContent.style.left = 'auto';
        modalContent.style.top = '10vh';
        modalContent.style.margin = 'auto';
        modalContent.style.transform = '';
    });
    
    // 为弹窗添加阴影和圆角效果
    modalContent.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.3)';
    modalContent.style.borderRadius = '12px';
    modalContent.style.border = 'none';
    
    // 添加淡入动画
    modal.style.opacity = '0';
    modal.style.transition = 'opacity 0.3s ease';
    setTimeout(() => {
        modal.style.opacity = '1';
    }, 10);
};

/**
 * 显示文件预览
 */
function showFilePreview(file) {
    const previewContainer = document.getElementById('file-preview-container');
    const contentPreview = document.getElementById('file-content-preview');
    
    if (!previewContainer || !contentPreview) return;
    
    // 确定文件类型
    const fileExt = file.name.split('.').pop().toLowerCase();
    const isTextFile = ['txt', 'md', 'csv', 'json'].includes(fileExt);
    const isImageFile = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExt);
    
    // 处理不同类型的文件
    if (isTextFile) {
        // 文本文件，直接读取内容
        const reader = new FileReader();
        reader.onload = function(e) {
            contentPreview.innerHTML = `<pre>${e.target.result}</pre>`;
            previewContainer.style.display = 'block';
        };
        reader.readAsText(file);
    } else if (isImageFile) {
        // 图片文件，显示预览
        const reader = new FileReader();
        reader.onload = function(e) {
            contentPreview.innerHTML = `<img src="${e.target.result}" alt="${file.name}" style="max-width: 100%; max-height: 200px;">`;
            previewContainer.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        // 其他文件类型，显示一个简单的预览信息
        contentPreview.innerHTML = `
            <div style="text-align: center; padding: 20px;">
                <i class="bi bi-file-earmark" style="font-size: 48px; color: var(--primary-color);"></i>
                <p>此文件类型不支持在线预览</p>
                <p>文件将在上传后进行处理</p>
            </div>
        `;
        previewContainer.style.display = 'block';
    }
}

/**
 * 初始化文件类型标签
 */
function updateFileTypeBadge(fileName) {
    const fileNameElement = document.getElementById('file-name');
    if (!fileNameElement) return;
    
    // 获取文件扩展名
    const fileExt = fileName.split('.').pop().toLowerCase();
    
    // 根据扩展名设置适当的图标和样式
    let icon = 'bi-file-earmark';
    let badgeClass = 'text';
    
    if (['pdf'].includes(fileExt)) {
        icon = 'bi-file-earmark-pdf';
        badgeClass = 'pdf';
    } else if (['doc', 'docx'].includes(fileExt)) {
        icon = 'bi-file-earmark-word';
        badgeClass = 'word';
    } else if (['xls', 'xlsx', 'csv'].includes(fileExt)) {
        icon = 'bi-file-earmark-excel';
        badgeClass = 'excel';
    } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
        icon = 'bi-file-earmark-image';
        badgeClass = 'image';
    } else if (['txt', 'md', 'json'].includes(fileExt)) {
        icon = 'bi-file-earmark-text';
        badgeClass = 'text';
    }
    
    // 更新文件名称显示
    fileNameElement.innerHTML = `
        <i class="${icon}"></i>
        ${fileName}
        <span class="file-type-badge ${badgeClass}">.${fileExt}</span>
    `;
}

// 增强原有的文件选择处理函数
const originalHandleFileSelected = window.handleFileSelected;
if (typeof originalHandleFileSelected === 'function') {
    window.handleFileSelected = function() {
        // 调用原始函数
        originalHandleFileSelected();
        
        // 增强功能
        const fileInput = document.getElementById('file-upload');
        if (fileInput && fileInput.files && fileInput.files.length > 0) {
            const file = fileInput.files[0];
            
            // 更新文件类型标签
            updateFileTypeBadge(file.name);
            
            // 显示文件预览
            showFilePreview(file);
        }
    };
}

// 暴露初始化函数，供外部调用
window.initDocumentFormFeatures = function() {
    initFileDragDrop();
    // 恢复字数统计器初始化，这是正确的调用时机（模块加载后）
    initTextCounter();
}; 